<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>奥莱购管理系统</title>
    <script src="./js/jquery.1.11.3.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/axios.js"></script>
    <script src="./js/cookie.js"></script>

    <style>
        body,
        html {
            height: 100%;
            background: #F1F2F3;

        }

        a {
            text-decoration: none
        }

        a :hover {
            text-decoration: none
        }


        img {
            width: 90px;
            height: 90px;
            margin: 3px;
            border: solid 2px #D7DDE8;
            border-radius: 10px;
        }

        .navbar {
            width: 100%;
            background-color: #0E1726;
            height: 50px;
            margin-top: -10px;
        }

        tr span {
            border-radius: 10px;
        }

        .conn {
            margin-top: 50px;
            height: 100%;
            width: 100%;
        }

        .conntxt {
            margin-left: 15.7%;
            margin-top: 20px;
            border-radius: 20px;
            margin-right: 10px;
        }

        table thead {
            background-color: #D8DFE8;
        }

        .modal-body input {
            width: 85%;
            margin-top: 5px;
        }

        .menu_style_on {
            background-color: #FAFAFA;
            width: 90%;
            height: 40px;
            border-radius: 10px;
            box-shadow: 2px 2px 2px #929293;
            color: #337AB7;
            font-weight: 900;
        }

        .menu_style_off {
            width: 90%;
            height: 40px;
            font-weight: 900;
            color: #0E1726;
        }

        .menu_style_on:hover {
            background-color: #BFC9D4;
            width: 90%;
            height: 40px;
            border-radius: 10px;
            box-shadow: 2px 2px 2px #cdcdd0;
            font-weight: 900;
        }

        .menu_style_off:hover {
            background-color: #BFC9D4;
            width: 90%;
            height: 40px;
            border-radius: 10px;
            /* color: #337AB7; */
            font-weight: 900;
        }

        svg {
            position: relative;
            top: 7px;
            margin-right: 10%;
            margin-left: 10%;
        }

        ul li .selected {
            background: rgb(199, 53, 53);
        }

        #pid_list2 option {
            padding: 0;
            width: 60px;
            height: 30px;
            text-align: center;
            background-color: #fff;
            line-height: 30px;
        }

        #pid_list2 option:hover {
            background-color: #337AB7;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container navbar navbar-fixed-top">
        <header class="row">
            <div class="col-xs-6">
                <h3><a href="" style="color: white;font-size: 2rem;">奥莱购后台管理系统</a> </h3>
            </div>
            <ul class="col-xs-6 text-right">
                <h3><a href="" style="color: white;font-size: 1.5rem;" id="del_login">退出登录</a></h3>
            </ul>
        </header>
    </div>
    <div class="container conn">
        <header class="row">
            <div class="col-xs-2 navbar-fixed-top conn_menu" style="top: 66px;">
                <ul class="list-unstyled menu-categories" id="accordionExample">
                    <li class="menu">
                        <a href="cms_index.html">
                            <div class="menu_style_on">
                                <svg xmlns=" http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-airplay">
                                    <path
                                        d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1">
                                    </path>
                                    <polygon points="12 15 17 21 7 21 12 15"></polygon>
                                </svg>
                                <span>商品管理</span>
                            </div>
                        </a>
                    </li>

                    <li class="menu">
                        <a href="cms_user.html">
                            <div class="menu_style_off">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-layout">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="3" y1="9" x2="21" y2="9"></line>
                                    <line x1="9" y1="21" x2="9" y2="9"></line>
                                </svg>
                                <span>用户管理</span>
                            </div>
                        </a>
                    </li>
                    <span>注意：由于老师接口里面pimg属性有字符串长度限制，添加图片时候尽量把网络图网址（一般都是长网址）转换为短网址。网图尽量选择京东、淘宝的，不会提示跳转风险。转短网址地址=><a
                            href="https://sina.lt/" target="black">https://sina.lt/</a></span>
                    <br>
                    <span>如果就传一张两张的话就不用转短网址了</span>
                </ul>
            </div>
            <ul class="col-xs-10 conntxt" style="background-color: #FFFFFF;">
                <!-- 上方导航栏 -->
                <div style="width: 100%; display: flex;">
                    <button class="btn btn-primary btn-default" data-toggle="modal" data-target="#myModal"
                        style="margin: 10px;margin-right:30px;height: 34px;">
                        添加商品
                    </button>

                    <!-- <div style="display: flex;" class="input-group ">
                        <span
                            style="background-color: #337AB7;color: white;height: 34px;margin-top: 10px;line-height: 34px;width: 80px;text-align: center;border-radius: 5px 0px 0px 5px;">选择分类</span>
                        <select class="form-control" style="width:80px;margin-top: 10px;" id="pid_list">

                        </select>
                    </div> -->

                    <div style="display: flex;" class="input-group " style="position: relative;">
                        <span style="background-color: #ffffff;border: solid #337AB7 1px;color: rgb(97, 96, 96);height:
                            34px;margin-top: 10px;line-height: 34px;width: 80px;text-align: center;border-radius: 5px
                            0px 0px 5px;">选择分类</span>
                        <ul id="pid_list2"
                            style="position: absolute;top: 45px;left:78px;border: solid #357CB9 1px;padding: 0;">

                        </ul>
                        <span style="width: 60px;border: solid #337AB7 1px;height: 34px;margin-top: 10px; line-height: 34px; border-radius:  0 5px 5px 0;
                            text-indent: 9px;color: white;cursor: pointer;background:
                            url(./img/向下尖括号.jpg) no-repeat 40px;background-color: #337AB7;">全部</span>

                    </div>


                    <div class="input-group " style="margin-top: 10px;margin-left: 30px;">
                        <input type="text" class="form-control" id="search_val" value="老师接口暂无搜索与分类功能">
                        <span class="input-group-addon btn btn-primary" id="search_btn"
                            style="background-color: #337AB7;color: white;">搜索</span>
                    </div>


                    <ul class="pagination" id="page_num" style="margin: 10px;">

                    </ul>
                </div>
                <!-- </div> -->
                <table class="table">
                    <thead>
                        <tr>
                            <th style="width: 35%;">
                                <div class="th-content">图片</div>
                            </th>
                            <th style="width: 20%;">
                                <div class="th-content">名称</div>
                            </th>
                            <th style="width: 10%;">
                                <div class="th-content">商品ID</div>
                            </th>
                            <th style="width: 10%;">
                                <div class="th-content">价格</div>
                            </th>
                            <th style="width: 10%;">
                                <div class="th-content">分类</div>
                            </th>
                            <th style="width: 15%;">
                                <div class="th-content">编辑商品</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody id="conn_list">

                    </tbody>

                </table>
                <!-- 页码放这里 -->
                <!-- <ul class="pagination center-block" id="page_num">

                </ul> -->
            </ul>

        </header>
    </div>

    <!-- 模态框（Modal）添加商品 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加商品
                    </h4>
                </div>
                <div class="modal-body">
                    <ul class="add_list">
                        <!-- <li>商品ID：<br><input type="text"></li> -->
                        <li>商品标题：<br><input type="text"></li>
                        <li>价格（¥）：<br><input type="text"></li>
                        <li>商品分类：<br><input type="text"></li>
                        <li>图片地址（最多五张）：
                            <br><input type="text">
                            <br><input type="text">
                            <br><input type="text">
                            <br><input type="text">
                            <br><input type="text"></li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" id="close_add_shop1" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <input type="button" id="add_shop1" class="btn btn-primary" value="提交">
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal）修改商品 -->
    <div class="modal fade" id="myModal_ed" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改商品
                    </h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>您当前正在修改的商品ID为：
                            <span id="ed_id" style="color: red;font-size: 1.5em;border: solid 1px #cecece;">11</span>
                        </li>
                        <li>商品标题：<br><input type="text" id="ed_title"></li>
                        <li>价格（¥）：<br><input type="text" id="ed_price"></li>
                        <li>商品分类：<br><input type="text" id="ed_pid"></li>
                        <li id="ed_pic">图片地址（最多五张）：
                            <input type="text">
                            <input type="text">
                            <input type="text">
                            <input type="text">
                            <input type="text"></li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" id="close_ed_shop" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <input type="button" id="ed_shop" class="btn btn-primary" value="确认修改商品信息">
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    $(function () {
        //判断是否在登录状态
        if (!getCookie("username") && !getCookie("password")) {
            $(location).attr('href', "cms_login.html");
        }
        //注销登录状态
        $("#del_login").click(function () {
            removeCookie("username");
            removeCookie("password");
            removeCookie("uid");
            removeCookie("token");
            $(location).attr('href', "cms_login.html");
        })

        //读取商品-start
        let page_n = 0;
        let uid = getCookie("uid")
        let token = getCookie("token")


        function getshop() {
            $.get(`http://jx.xuzhixiang.top/ap/api/productlist.php?uid=${uid}`).then(res => {
                //判断是否有分类或者搜索的数据
                console.log(res.data);
                if (data_a && !data_b) {
                    res.data = data_a
                } else if (!data_a && data_b) {
                    res.data = data_b
                } else if (data_b && data_a) {
                    data_arr = []
                    for (let i = 0; i < data_a.length; i++) {
                        for (let j = 0; j < data_b.length; j++) {
                            if (data_a[i].id == data_b[j].id) {
                                data_arr.push(data_b[j])
                            }
                        }
                    }
                    res.data = data_arr
                }

                //自动设置页码
                let page_max = Math.ceil(res.data.length / 5);
                let str_page = "";
                for (let j = 0; j < page_max; j++) {
                    str_page += `<li><a class="select">${j+1}</a></li>`;
                };
                str_page =
                    `<li><a>&laquo;</a></li>${str_page}<li><a>&raquo;</a></li>`;
                $("#page_num").html(str_page);
                // $("#page_num").css("margin-left", "40%")
                $("#page_num").children().first().click(function () {
                    page_n += -1;
                    if (page_n <= -1) {
                        page_n = 0
                    };
                    getshop();
                });
                $("#page_num").children().last().click(function () {
                    page_n += 1;
                    if (page_n >= page_max) {
                        page_n = page_max - 1;
                    }
                    getshop();
                });
                for (let p = 1; p <= page_max; p++) {
                    $("#page_num").children().eq(p).click(function () {
                        page_n = p - 1;
                        getshop();
                    })

                }

                //根据页码读取数据
                let str = "";
                console.log(res.data.pimg)
                //对img进行处理
                for (let p = 0; p < res.data.length; p++) {
                    res.data[p].pimg = res.data[p].pimg.split(",")
                }
                /////

                for (let i = page_n * 5; i < (page_n * 5) + 5; i++) {
                    if (res.data[i]) {
                        let str2 = "";
                        for (let j = 0; j < 5; j++) {
                            if (res.data[i].pimg[j] != "") {
                                str2 +=
                                    `<a href="${res.data[i].pimg[j]}" target='_blank'><img src="${res.data[i].pimg[j]}"
                                    alt="avatar"></a>`
                            }
                        }
                        str += `
                                <tr>
                                    <td>
                                        <div class="customer-name">
                                            ${str2}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="td-content product-brand">${res.data[i].pname}</div>
                                    </td>
                                    <td>
                                        <div class="td-content">${res.data[i].pid}</div>
                                    </td>
                                    <td>
                                        <div class="td-content pricing"><span class="">¥${res.data[i].pprice}</span></div>
                                    </td>
                                    <td>
                                        <div class="td-content pricing"><span class="">${res.data[i].pdesc}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="myModal_ed" data-toggle="modal" data-target="#myModal_ed">
                                            <span class="btn btn-success btn-sm">修改</span>
                                        </div><br>
                                        <div class="del_shop"><span class="btn btn-danger btn-sm">删除</span></div>
                                    </td>
                                </tr>`
                    };
                };
                $("#conn_list").html(str);
            })
            pdesc_li();
        };
        getshop();
        //读取商品-end


        //自动创建分类-start
        function pdesc_li() {
            $.get(`http://jx.xuzhixiang.top/ap/api/productlist.php?uid=${uid}`).then(res => {
                // console.log("000", res.data);
                let pdesc_arr = []
                for (let i = 0; i < res.data.length; i++) {
                    if (pdesc_arr.indexOf(res.data[i].pdesc) == -1) {
                        pdesc_arr.push(res.data[i].pdesc)
                    }
                }
                let pdesc_str = "<option>全部</option>"
                for (let j = 0; j < pdesc_arr.length; j++) {
                    pdesc_str += `
                    <option>${pdesc_arr[j]}</option>
                    `
                }
                // $("#pid_list").html(pdesc_str)
                $("#pid_list2").html(pdesc_str)
            })
        }
        //自动创建分类-end



        //删除商品-start
        $("#conn_list").delegate("tr .del_shop", "click", function () {
            console.log(this);
            let pid = $(this).parent().parent().children().eq(2).children().text();
            let delidh =
                `http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=${pid}&uid=${uid}&token=${token}`;
            $.get(delidh).then(res => {
                $(this).parent().parent().remove()
                // getshop();
                console.log("删除成功");

            });
        });
        //删除商品-end

        //修改商品-starts
        //01-事件委托-获取商品到弹出框
        let this_edbtn
        $("#conn_list").delegate("tr .myModal_ed", "click", function () {
            console.log($(this));
            let pid = $(this).parent().parent().children().eq(2).children().text();
            $.get(`http://jx.xuzhixiang.top/ap/api/detail.php?id=${pid}`).then(res => {
                res.data.pimg = res.data.pimg.split(",")
                console.log(res.data.pimg)
                $("#ed_id").text(res.data.pid);
                $("#ed_title").val(res.data.pname);
                $("#ed_price").val(res.data.pprice);
                $("#ed_pid").val(res.data.pdesc);
                console.log(res.data.pimg)
                for (let j = 0; j < res.data.pimg.length; j++) {
                    $("#ed_pic").children().eq(j).val(res.data.pimg[j])
                    console.log(j)
                }
            })
            this_edbtn = $(this).parent().parent().children()
        });
        //02-修改商品(提交)
        $("#ed_shop").click(function () {
            let pid = $("#ed_id").text()
            console.log(pid);
            let arr = [];
            for (let i = 0; i < 5; i++) {
                arr.push($("#ed_pic").children().eq(i).val())
            }
            let pname = $("#ed_title").val()
            let pprice = $("#ed_price").val()
            let pdesc = $("#ed_pid").val()
            let pimg = arr
            console.log(pid, pname, pprice, pdesc);
            // uid=${uid}&token=${token}&
            $.get(
                    `http://jx.xuzhixiang.top/ap/api/goods/goods-update.php?pid=${pid}&pname=${pname}&pprice=${pprice}&pdesc=${pdesc}&pimg=${pimg}`
                )
                .then(res => {
                    console.log(res.data);
                    $("#close_ed_shop").click()
                    console.log("修改成功");
                    //物理DOM结构修改
                    let str_temp = "";
                    for (let j = 0; j < 5; j++) {
                        if (arr[j]) {
                            str_temp += `<a href="${arr[j]}"
                      target='_blank'><img src="${arr[j]}" alt="avatar"></a>`
                        }
                    }
                    console.log(str_temp);
                    this_edbtn.eq(0).children().html(str_temp)
                    this_edbtn.eq(1).children().text($("#ed_title").val());
                    this_edbtn.eq(3).children().text("¥" + $("#ed_price").val());
                    this_edbtn.eq(4).children().text($("#ed_pid").val());
                });
        })
        //修改商品-end

        //添加商品-start

        console.log($(".add_list input").eq(3));
        console.log(uid);
        $("#add_shop1").click(function () {
            let arr = [];
            for (let i = 3; i < $(".add_list input").length; i++) {
                arr.push($(".add_list input").eq(i).val());
            }
            pimg = arr;
            console.log(arr)
            pname = $(".add_list input").eq(0).val();
            pprice = $(".add_list input").eq(1).val();
            pdesc = $(".add_list input").eq(2).val();
            $.post(
                    `http://jx.xuzhixiang.top/ap/api/goods/goods-add.php?uid=${uid}&pimg=${arr}&pname=${pname}&pprice=${pprice}&pdesc=${pdesc}`
                )
                .then(function (res) {
                    $(".add_list input").val("");
                    $("#close_add_shop1").click();
                    getshop();
                    console.log("添加成功");
                    console.log(res);
                }).catch(function (e) {
                    console.log(e);
                });

        })
        //添加商品-end

        //搜索商品-start
        let data_arr = [];
        let data_b = false;
        $("#search_btn").click(function () {
            if (!$("#search_val").val()) {
                data_b = false
                getshop();
            } else {
                let search = `http://localhost:3000/products?q=${$("#search_val").val()}`
                axios.get(search).then(res => {
                    data_b = res.data
                })
                getshop();
            }
        })
        //搜索商品-start


        //选择分类-start
        let data_a = false
        $("#pid_list2").hide()
        $("#pid_list2").delegate("option", "click", function () {
            $("#pid_list2").next().text($(this).text())
            if ($(this).text() == "全部") {
                data_a = false
                getshop();
            } else {
                axios.get(`http://localhost:3000/products?pid=${$(this).text()}`).then(res => {
                    data_a = res.data
                    getshop();
                })
            }
        });
        $("#pid_list2").next().click(function () {
            $("#pid_list2").toggle()
        });
        $("#pid_list2").click(function () {
            $("#pid_list2").hide()
        })
        //选择分类-end

    });
</script>

</html>